import React, { Component } from 'react'
import { reqgetbanner, reqgetcate, reqgetindexgoods, reqgetnew, reqgetgroupon, reqgetseckill, reqgetcountdown } from '../../http/api'
import Header from '../../components/Header/Header'
import Banner from './components/Banner/Banner'
import Cate from './components/Cate/Cate'
import Goods from './components/Goods/Goods'
import NewComers from './components/NewComers/NewComers'
import Group from './components/Group/Group'
import SecKill from './components/SecKill/SecKill'


export default class Home extends Component {
  constructor() {
    super()
    // 初始化数据
    this.state = {
      cate: [],
      banner: [],
      goods: [],
      newcomers: [],
      goodsList: ["综合推荐", "热卖商品", "上新商品", "所有商品"],
      n: 0,
      getgroup: [],
      seckill: [],
      time: {
        hour: 0,
        minute: 0,
        second: 0
      }
    }
  }
  // 页面加载完成就发送请求--cate&&banner
  async componentDidMount() {
    // 分类
    let resCate = await reqgetcate()
    if (resCate.data.code === 200) {
      this.setState({
        cate: resCate.data.list ? resCate.data.list : []
      })
    }
    // banner
    let resBanner = await reqgetbanner()
    if (resBanner.data.code === 200) {
      this.setState({
        banner: resBanner.data.list ? resBanner.data.list : []
      })
    }
    // 商品
    let resGoods = await reqgetindexgoods()
    if (resGoods.data.code === 200) {
      this.setState({
        goods: resGoods.data.list ? resGoods.data.list : []
      })
    }
    // 新人专享
    let resnewcomers = await reqgetnew()
    if (resnewcomers.data.code === 200) {
      this.setState({
        newcomers: resnewcomers.data.list ? resnewcomers.data.list : []
      })
    }
    // 万人团
    let resgroup = await reqgetgroupon()
    if (resgroup.data.code === 200) {
      this.setState({
        getgroup: resgroup.data.list ? resgroup.data.list : []
      })
    }
    // 秒杀
    let resseckill = await reqgetseckill()
    if (resseckill.data.code === 200) {
      this.setState({
        seckill: resseckill.data.list ? resseckill.data.list : []
      })
    }
    // 页面挂载完成启动定时器
    const end = new Date('2022-07-05 08:00').getTime()
    this.countFun(end);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  // 封装一个倒计时函数
  countFun = (end) => {
    let now_time = +new Date();
    var remaining = end - now_time;
    console.log(remaining);
    this.timer = setInterval(() => {
      //防止出现负数
      if (remaining > 1000) {
        remaining -= 1000;
        let hour = Math.floor((remaining / 1000 / 3600) % 24);
        let minute = Math.floor((remaining / 1000 / 60) % 60);
        let second = Math.floor(remaining / 1000 % 60);

        this.setState({
          time:{
            ...this.state.time,
            hour: hour < 10 ? "0" + hour : hour,
            minute: minute < 10 ? "0" + minute : minute,
            second: second < 10 ? "0" + second : second
          }
        })
      } else {
        clearInterval(this.timer);
      }
    }, 1000);
  }
  // 修改n值得回调函数
  upDataN(n) {
    this.setState({
      n: n
    })
  }

  render() {
    let { cate, banner, goods, goodsList, n, newcomers, getgroup, seckill,time } = this.state
    return (
      <div>
        {/* 头部 */}
        <Header back title="首页"></Header>
        {/* 搜索 */}
        {/* <ToSearch></ToSearch> */}
        {/* 商品分类 */}
        {/* 秒杀 */}
        <SecKill seckill={seckill} time={time}></SecKill>
        <Cate cate={cate}></Cate>
        {/* banner */}
        <Banner banner={banner} ></Banner>
        {/* 新人专享 */}
        <NewComers newcomers={newcomers}></NewComers>
        {/* Goods商品 */}
        <Goods goods={goods} goodsList={goodsList} n={n} upDataN={(n) => { this.upDataN(n) }}></Goods>
        {/* 万人团 */}
        <Group getgroup={getgroup}></Group>




      </div>
    )
  }
}
